<!doctype html>
<html>
	<head>
		<!--声明当前页码的编码集：charset=gbk,gb2312(中文编码),utf-8(国际编码)-->
		<meta http-equiv="content-Type" content="text/html;charset=utf-8">
		<!--当前页面的三要素-->
		<title>第十四节，一切皆为框</title>
		<meta name="keywords" content="关键词,关键词">
		<meta name="description" content="">

		<!--css,js-->
		<style type="text/css">
			*{margin:0;padding:0;}
			img{border:0;}
			body{font-size:12px;font-family:"微软雅黑"; color:#000}
			.shisi{width:800px;border:1px solid #000;margin:10px auto;}
			.shisi .kuang{width:300px;height:100px;border:1px solid green;margin:10px auto;}
			h2,h3{text-align:center;}
			span{border:1px solid red;display:block;width:600px;height:30px;margin:10px auto;}
			.shisi .all{width:794px;border:3px solid green;}
			.shisi .all .a_left{width:394px;height:300px;background:#FC0;float:left;}
			.shisi .all .a_right{width:400px;height:300px;background:#69F;float:left;}
			/*清除浮动*/
			.clear{clear:both;}
			.shisi .all .a_right .course{width:150px;height:50px;display:block;background:#ff9a00;margin:130px auto;
				text-align:center;line-height:50px;text-decoration:none;font-size:16px;color:#FFF;
				font-weight:bold;
				/*文字间距*/
				letter-spacing:2px;
				/*设置圆角*/
				border-radius:5px;
			}
			.shisi .all .a_right .course:hover{background:#FC0;}

			.shisi .yuan{width:200px;height:200px;display:block;background:#00ffff;
				text-align:center;line-height:200px;text-decoration:none;font-size:25px;color:#fff;
				border-radius:100px;float:left;margin:10px 30px;}
			.shisi .yuan:hover{background:#FC0;color:#66F;}

			.shisi .banner{width:670px;height:240px;margin:20px auto;overflow:hidden;position:relative;}
			.shisi .banner ul {position:absolute;bottom:5px;right:5px;}
			.shisi .banner ul li{float:left;width:23px;height:23px;text-align:center;
				line-height:23px;border-radius:13px;list-style:none;
				background:#999;margin-left:5px;color:#fff;font-size:14px;}
			.shisi .banner ul .sel{background:#E4393C;}


		</style>
	</head>
<body>
	<h1>第十四节，一切皆为框</h1>
	<div class="shisi">
		<h2>块级元素：div、h1或p元素 即：显示为一块内容称之为“块框”</h2>
		<div class="kuang">div</div>
		<p>我是一个p标签，自动占据一行</p>	
		<h2>行内元素: span,strong,a等元素 即：内容显示在行中称 "行内框";</h2>
		<span>我是一个span标签，我是行内元素</span>
	</div>
	<div class="shisi">
		<div class="all">
			<div class="a_left"><h2>.clear{clear:both;}</h2></div>
			<div class="a_right"><a href="#" class="course">爽歪歪</a></div>	
			<div class="clear"></div>
		</div>
	</div>
	<div class="shisi">
		<a href="#" class="yuan">圆是怎么来的？</a>
		<a href="#" class="yuan">正方形的圆角大小</a>
		<a href="#" class="yuan">等于宽度的一半</a>
		<div class="clear"></div>
		<div class="banner">
			<p>
				<a href="#">
					<img src="images/14-1.jpg" alt="京东白条" width="670" height="240"/>
				</a>
			</p>
			<p>
				<a href="#">
					<img src="images/14-2.jpg" alt="京东白条" width="670" height="240"/>
				</a>
			</p>
			<p>
				<a href="#">
					<img src="images/14-3.jpg" alt="京东白条" width="670" height="240"/>
				</a>
			</p>
			<ul>
				<li class="sel">1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</div>

	
</body>
</html>